<style scoped>
</style>
<template>
    <div class="mui-content" id="content">
        <div class="mui-card">
            <!--页眉，放置标题-->
            <div class="mui-card-header mui-card-media">
                <img :src="detail.images.medium" />
                <div class="mui-media-body">
                    {{detail.title}}
                    <p>别名 <span v-for="name in detail.aka">{{name}} &nbsp;</span></p>
                </div>
            </div>
            <!--内容区-->
            <div class="mui-card-content">
                {{detail.summary}}
            </div>
            <!--页脚，放置补充信息或支持的操作-->
            <div class="mui-card-footer">页脚</div>
        </div>
    </div>
</template>
<script>

    import api from '@/fetch/api';

  export default {
    data () {
      return {
          detail:{},
      }
    },
      methods:{
          getDetail (id) {
              if (!id) {
                  mui.alert('参数错误');
                  return;
              }
              this.$emit('showLoading');
              api.fetchPost(api.path.subject + `/${id}`).then((data) => {
                  //控制加载条
                  this.$emit('hideLoading');
                  this.detail = data;
                  //console.log(JSON.stringify(data));
              }).catch(err => {
                  this.$emit('hideLoading');
              })
          }
      },
      mounted(){
          let $this = this;
          this.getDetail(this.$route.params.id);
        }
      }

</script>
